<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
  <meta charset="utf-8">
  <title>普通Top不普通</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="shortcut icon" type="image/x-icon" th:href="@{/img/p.ico}" media="screen" />
  <link rel="stylesheet" href="../layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all" />
  
  <link rel="stylesheet" type="text/css" th:href="@{/css/normalize.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{css/default.css}">
  <link rel="stylesheet" th:href="@{/css/sangarSlider.css}" type="text/css" media="all">
  <link rel="stylesheet" th:href="@{/themes/default/default.css}" type="text/css" media="all">
  <link rel="stylesheet" th:href="@{/css/demo.css}" type="text/css" media="all">
  

</head>
<body>
<div class="layui-layout-admin">
<!-- 引入导航代码  -->
<div th:include="navigation :: navigation"></div>
<div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px; text-align: center;">
  <legend style="font-size: 50px">Welcome to you, my friend!</legend>
</fieldset>
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px; text-align: center;">
  <legend>美图欣赏</legend>
</fieldset>    
 
<div class="jq22-content bgcolor-3">
			<div class='sangar-slideshow-container' id='sangar-example'>
				<div class='sangar-content-wrapper'>
					<div class='sangar-content'>
						<img th:src='@{/carousel/img/xc.png}' />
						<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI0ODg5OTgzOQ==&scene=124#wechat_redirect"></a>
					</div>
					<div class='sangar-content'>
						<img th:src='@{/carousel/img/xc.png}' />
						<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI0ODg5OTgzOQ==&scene=124#wechat_redirect"></a>
					</div>				
					<!-- <div class='sangar-content'>
						<div class="sslider-bg-content" style="background-color:rgb(144, 27, 27);"></div>
					</div> -->
					<div class='sangar-content'>
						<img th:src='@{/carousel/img/xc.png}' />
						<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI0ODg5OTgzOQ==&scene=124#wechat_redirect"></a>
					</div>
					<div class='sangar-content'>
						<img th:src='@{/carousel/img/sb.gif}' />
					</div>
				</div>
			</div>
		</div>
	</div>
 
</div>
<!-- 引入底部代码 -->
<div class="layui-layout-admin">
<div class="layui-footer" style="left: 0;" th:include="footer :: footer"></div>
</div>
</body>
<!-- 引入js文件 -->
<script type="text/javascript" src="../layui/layui.js" th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script type="text/javascript" src="../jquery/jquery-3.3.1.min.js" th:src="@{/jquery/jquery-3.3.1.min.js}" charset="utf-8"></script>
<script type="text/javascript" src="../js/jquery.touchSwipe.min.js" th:src="@{/js/jquery.touchSwipe.min.js}" charset="utf-8"></script>
<script type="text/javascript" src="../js/navigation.js" th:src="@{/js/navigation.js}" charset="utf-8"></script>
<script type="text/javascript" src="../js/imagesloaded.min.js" th:src="@{/js/imagesloaded.min.js}" charset="utf-8"></script>

<script type="text/javascript" src="../js/sangarSlider/sangarBaseClass.js" th:src="@{/js/sangarSlider/sangarBaseClass.js}" charset="utf-8"></script>
<script type="text/javascript" src="../js/sangarSlider/sangarSetupLayout.js" th:src="@{/js/sangarSlider/sangarSetupLayout.js}" charset="utf-8"></script>
<script type="text/javascript" src="../js/sangarSlider/sangarSizeAndScale.js" th:src="@{/js/sangarSlider/sangarSizeAndScale.js}" charset="utf-8"></script>
<script type="text/javascript" src="../js/sangarSlider/sangarShift.js" th:src="@{/js/sangarSlider/sangarShift.js}" charset="utf-8"></script>
<script type="text/javascript" src="../js/sangarSlider/sangarSetupBulletNav.js" th:src="@{/js/sangarSlider/sangarSetupBulletNav.js}" charset="utf-8"></script>
<script type="text/javascript" src="../js/sangarSlider/sangarSetupNavigation.js" th:src="@{/js/sangarSlider/sangarSetupNavigation.js}" charset="utf-8"></script>
<script type="text/javascript" src="../js/sangarSlider/sangarSetupSwipeTouch.js" th:src="@{/js/sangarSlider/sangarSetupSwipeTouch.js}" charset="utf-8"></script>
<script type="text/javascript" src="../js/sangarSlider/sangarSetupTimer.js" th:src="@{/js/sangarSlider/sangarSetupTimer.js}" charset="utf-8"></script>
<script type="text/javascript" src="../js/sangarSlider/sangarBeforeAfter.js" th:src="@{/js/sangarSlider/sangarBeforeAfter.js}" charset="utf-8"></script>
<script type="text/javascript" src="../js/sangarSlider/sangarLock.js" th:src="@{/js/sangarSlider/sangarLock.js}" charset="utf-8"></script>
<script type="text/javascript" src="../js/sangarSlider/sangarResponsiveClass.js" th:src="@{/js/sangarSlider/sangarResponsiveClass.js}" charset="utf-8"></script>
<script type="text/javascript" src="../js/sangarSlider/sangarResetSlider.js" th:src="@{/js/sangarSlider/sangarResetSlider.js}" charset="utf-8"></script>
<script type="text/javascript" src="../js/sangarSlider/sangarTextbox.js" th:src="@{/js/sangarSlider/sangarTextbox.js}" charset="utf-8"></script>
<script type="text/javascript" src="../js/sangarSlider.js" th:src="@{/js/sangarSlider.js}" charset="utf-8"></script>

<script type="text/javascript" th:inline="javascript">

layui.use(['carousel', 'form', 'layer', 'element'], function(){
	  var carousel = layui.carousel,
	  form = layui.form,
	  layer = layui.layer,
	  element = layui.element;

	
});

jQuery(document).ready(function($) {
    $('#sangar-example').sangarSlider({
    	animation : 'fade',
		width : 850,
		height : 850,
		timer : true,
		advanceSpeed : 3000,
		pauseOnHover : true,
		startClockOnMouseOut : true,
		startClockOnMouseOutAfter : 100,
		fixedHeight : true
    });
})
</script>

</html>